<template>
  <div class="payment-result">
    <div class="header">
        <a href="javascript:history.back()"><img src="../assets/images/retreat.png" alt=""/></a>
        <span>支付</span>
    </div>
    <div class="result">
        <div class="success"><img src="../assets/images/pay_success.png" alt=""></div>
        <p>成功支付300元</p>
    </div>
    <div class="return-query">
        <button class="go-index">去首页</button>
        <button class="query-order">查看订单</button>
    </div>
    <div class="mask" v-if="redPacketBoxShow"></div>
    <div class="red-packet-box" v-if="redPacketBoxShow">
        <h2><img src="../assets/images/gongxila.png" alt=""></h2>
        <p class="red-packet-worth">获得<b>300元</b>会员红包!</p>
        <div class="red-packet"><img src="../assets/images/red_packet.png" alt=""></div>
        <div class="store-give">
            <h3>【哒哒快餐店】赠送</h3>
            <span>红包已放入钱包，使用期有限，请尽快使用</span>
        </div>
        <p class="split-line"><img src="../assets/images/split_line.png" alt=""></p>
        <div class="confirm-query">
            <button class="confirm" @click.stop="redPacketBoxShow = false">知道了</button>
            <button class="toquery">去查看 &gt;&gt;</button>
        </div>
    </div>
  </div>
</template>

<script>

export default {
    name: 'payment-result',
    components: {
    },
    data () {
        return {
            redPacketBoxShow: true
        }
    },
    methods: {
    }
}
</script>
<style scoped>
/*主体样式*/
img {
  width: 100%;
  height: 100%;
}
.result {
  margin-top: 1.6rem;
  text-align: center;
}
.success {
  width: 1.88rem;
  height: 1.88rem;
  background: #09bebf;
  border-radius: 50%;
  margin: 0 auto;
}
.success img {
  width: 1.12rem;
  height: 0.76rem;
  margin: 0.56rem auto;
}
.result p {
  color: #181818;
  font-size: 0.48rem;
  margin-top: 0.48rem;
  font-weight: bold;
}
.return-query {
  width: 6.56rem;
  margin: 1.76rem auto 0;
  overflow: hidden;
}
.return-query button {
  float: left;
  width: 2.68rem;
  height: 1.04rem;
  border-radius: 0.52rem;
  font-size: 0.4rem;
}
.go-index {
  border: 1px solid #55d2d3;
  color: #55d2d3;
  margin-right: 1.2rem;
  background: #fff;
}
.query-order {
  background: #09bebf;
  color: #fff;
}
.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.red-packet-box {
  position: fixed;
  width: 7.3333rem;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0.16rem;
  text-align: center;
}
.red-packet-box h2 {
  width: 2.2667rem;
  height: 0.7333rem;
  margin: 0.6667rem auto 0;
}
.red-packet-worth {
  margin-top: 0.2667rem;
  color: #ff3937;
  font-size: 0.4rem;
}
.red-packet-worth b {
  margin: 0 0.16rem;
  font-size: 0.4533rem;
}
.red-packet {
  margin-top: 0.6rem;
  width: 100%;
  height: 4.2667rem;
}
.store-give h3 {
  color: #fb3b2b;
  font-size: 0.4267rem;
  margin-bottom: 0.16rem;
}
.store-give span {
  font-size: 0.32rem;
  color: #a1a1a1;
}
.split-line {
  width: 7.36rem;
  height: 0.5333rem;
  margin: 0.16rem 0 0.16rem -1px;
}
.confirm-query {
  width: 5.84rem;
  margin: 0.16rem auto 0.4rem;
  overflow: hidden;
}
.confirm-query button {
  width: 2.68rem;
  height: 0.88rem;
  border-radius: 0.44rem;
  font-size: 0.4rem;
  float: left;
}
.confirm {
  border: 1px solid #fd3e39;
  color: #fd3e39;
  background: #fff;
  margin-right: 0.48rem;
}
.toquery {
  background: #ff3a31;
  color: #fff;
}
</style>

